<template>
    <div class="classificationList" v-if="conditionsResult && productdata">
        <search></search>
        <!-- 三级类目头部 -->
        <div class="goodsclass">
            <div class="goodsclass-head area">
                <span><router-link to="/index">首页</router-link></span>
                <!-- 遍历路径 -->
                <div class="jaj" v-for="(item,index) in conditionsResult.proTypeUrls" :key="index">
                    <Icon type="ios-arrow-right" class="mar-right jt"></Icon>
                    <span @click="productpath(item.productTypeId,item.type)">{{item.name}}</span>
                </div>
                <!-- 品牌的name -->
                <div class="jaj" v-if="brandId">
                    <!-- <Icon type="ios-arrow-right" class="mar-right jt"></Icon> -->
                    <div class="lsdel">
                        <span>{{brandname}}</span>
                        <Icon type="ios-close-empty" class="ll" @click.native="brandqb"></Icon>
                    </div>
                </div>
                <!-- 风格等筛选集第一列 -->
                <div class="jaj" v-if="styleid">
                    <!-- <Icon type="ios-arrow-right" class="mar-right jt"></Icon> -->
                    <div class="lsdel">
                        <span>{{stylename}}</span>
                        <Icon type="ios-close-empty" class="ll" @click.native="styleqb"></Icon>
                    </div>
                </div>
                <!-- 风格等筛选集第二列 -->
                <div class="jaj" v-if="designid">
                    <!-- <Icon type="ios-arrow-right" class="mar-right jt"></Icon> -->
                    <div class="lsdel">
                        <span>{{designidname}}</span>
                        <Icon type="ios-close-empty" class="ll" @click.native="designqb"></Icon>
                    </div>
                </div>
                <!-- 风格等筛选集第三列 -->
                <div class="jaj" v-if="constructionid">
                    <div class="lsdel">
                        <span>{{constructionidname}}</span>
                        <Icon type="ios-close-empty" class="ll" @click.native="constrqb"></Icon>
                    </div>
                </div>
            </div>
        </div>
        <!-- 物品选择 -->
        <div class="goodschoose">
            <div class="goodsch-conent">
                <!-- 一品牌 -->
                <div class="leimu fff">
                    <div class="yfd">
                        <span class="ml gray bpfl">品牌：</span>
                    </div>   
                    <div class="bp">
                        <span :class="{'green':brandId == null,'gaoliang':true}" @click="brandqb">全部</span>
                        <span v-for="(item,index) in pinpaione" :key="index" :class="{'green':item.brandId == brandId ,'gaoliang':true}" @click="brand(item.brandId,item.brandName)">{{item.brandName}}</span>
                    </div>            
                    <div class="down-up" @click="updown(1)" v-if="conditionsResult.brands.length>11">
                        <Icon type="ios-arrow-down" v-if="one_down"></Icon>
                        <Icon type="ios-arrow-up" v-if="one_up"></Icon>
                    </div>
                    <div class="bp dz" v-if="one_up && i == 1">
                        <span v-for="(item,index) in pinpaitwo" :key="index" :class="{'green':item.brandId == brandId ,'gaoliang':true}" @click="brand(item.brandId,item.brandName)">{{item.brandName}}</span>
                    </div>
                </div>
                <!-- 分类 -->
                <div class="leimu fff" v-if="conditionsResult.proTypes.length != 0 ">
                    <div class="yfd">
                        <span class="ml gray bpfl">分类：</span>
                    </div>   
                    <div class="bp">
                        <span class="green">全部</span>
                        <span v-for="(item,index) in fenlei_one" :key="index" class="gaoliang" @click="fenlei(item.productTypeId,item.type)">{{item.name}}</span>
                    </div>            
                    <div class="down-up" @click="updown(2)" v-if="conditionsResult.proTypes.length > 11">
                        <Icon type="ios-arrow-down" v-if="two_down"></Icon>
                        <Icon type="ios-arrow-up" v-if="two_up"></Icon>
                    </div>
                    <div class="bp dz" v-if="two_up && i == 2">
                        <span v-for="(item,index) in fenlei_two" :key="index" class="gaoliang" @click="fenlei(item.productTypeId,item.type)">{{item.name}}</span>
                    </div>
                </div>
                <!-- 风格等筛选条件集的第一列 -->
                <div class="leimu fff" v-if="conditionsResult.proConditions != null && conditionsResult.proConditions.length != 0">
                    <div class="yfd">
                        <span class="ml gray bpfl">{{conditionsResult.proConditions[0].conditionName}}：</span>
                    </div> 
                    <div class="bp">
                        <span :class="{'green':styleid == null,'gaoliang':true}" @click="styleqb">全部</span>
                        <span v-for="(item,index) in fgyiline_one" :key="index" :class="{'green':item.conditionsId == styleid ,'gaoliang':true}" @click="style(item.conditionsId,item.name)">{{item.name}}</span>
                    </div>            
                    <div class="down-up" @click="updown(2)" v-if="conditionsResult.proConditions[0].conditions.length>11">
                        <Icon type="ios-arrow-down" v-if="two_down"></Icon>
                        <Icon type="ios-arrow-up" v-if="two_up"></Icon>
                    </div>
                    <div class="bp dz" v-if="two_up && i == 2">
                        <span  v-for="(item,index) in fgyiline_two" :key="index" :class="{'green':intarr[0] == item.conditionsId ,'gaoliang':true}" @click="style(item.conditionsId,item.name)">{{item.name}}</span>
                    </div>
                </div>
                <!-- 风格等筛选条件集的第二列 -->
                <div class="leimu fff" v-if="conditionsResult.proConditions != null && conditionsResult.proConditions.length > 1">
                    <div class="yfd">
                        <span class="ml gray bpfl">{{conditionsResult.proConditions[1].conditionName}}：</span>
                    </div> 
                    <div class="bp">
                        <span :class="{'green':designid == null,'gaoliang':true}" @click="designqb">全部</span>
                        <span v-for="(item,index) in fgerline_one" :key="index" :class="{'green':designid == item.conditionsId ,'gaoliang':true}" @click="design(item.conditionsId,item.name)">{{item.name}}</span>
                    </div>            
                    <div class="down-up" @click="updown(3)" v-if="conditionsResult.proConditions[1].conditions.length>11">
                        <Icon type="ios-arrow-down" v-if="three_down"></Icon>
                        <Icon type="ios-arrow-up" v-if="three_up"></Icon>
                    </div>
                    <div class="bp dz" v-if="three_up && i == 3">
                        <span v-for="(item,index) in fgerline_two" :key="index" :class="{'green':designid == item.conditionsId ,'gaoliang':true}" @click="design(item.conditionsId,item.name)">{{item.name}}</span>
                    </div>
                </div>
                <!-- 风格等筛选条件集的第三列 -->
                <div class="leimu fff" v-if="conditionsResult.proConditions != null && conditionsResult.proConditions.length > 2">
                    <div class="yfd">
                        <span class="ml gray bpfl">{{conditionsResult.proConditions[2].conditionName}}：</span>
                    </div> 
                    <div class="bp">
                        <span :class="{'green':constructionid == null,'gaoliang':true}" @click="constrqb">全部</span>
                        <span v-for="(item,index) in fgsanline_one" :key="index" :class="{'green':constructionid == item.conditionsId ,'gaoliang':true}" @click="construction(item.conditionsId,item.name)">{{item.name}}</span>
                    </div>            
                    <div class="down-up" @click="updown(4)" v-if="conditionsResult.proConditions[2].conditions.length>11">
                        <Icon type="ios-arrow-down" v-if="four_down"></Icon>
                        <Icon type="ios-arrow-up" v-if="four_up"></Icon>
                    </div>
                    <div class="bp dz" v-if="four_up && i == 4">
                        <span v-for="(item,index) in fgsanline_two" :key="index" :class="{'green':constructionid == item.conditionsId ,'gaoliang':true}" @click="construction(item.conditionsId,item.name)">{{item.name}}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 中间产品部分 -->
        <div class="class-mian">
            <div class="area">
                <!-- 选择价格 -->
                <div class="price-choose">
                    <ul>
                        <li class="price-updown widthonehan"  @click="tiemsort()">
                            <span>时间排序</span>
                            <Icon type="ios-arrow-up" :class="{'price-up':true,'color':sortcolor == 2}"></Icon>
                            <Icon type="ios-arrow-down" :class="{'price-down':true,'color':sortcolor == 1}"></Icon>             
                        </li>
                        <li class="price-updown" @click="liuxing">
                            <span>价格</span>
                            <Icon type="ios-arrow-up" :class="{'price-up':true,'color':moneycolor == 2}"></Icon>
                            <Icon type="ios-arrow-down" :class="{'price-down':true,'color':moneycolor == 1}"></Icon>             
                        </li>
                        <li class="money-section mdl">
                            <Icon type="social-yen" class="greh"></Icon>
                            <!-- <input type="text"> -->
                            <i-input class="input" :maxlength=6 v-model="moneybefore"></i-input>
                        </li>
                        <li class="mdl">
                            <span>-</span>
                        </li>
                        <li class="money-section mdl">
                            <Icon type="social-yen" class="greh"></Icon>
                            <i-input class="input" :maxlength=6 v-model="moneyafter" @keyup.enter.native="sure"></i-input>
                        </li>
                        <li class="make-sure" @click="sure">
                            确定
                        </li>
                    </ul>
                </div>
                <!-- 商品 -->
                <div class="goodslist" v-if="productdata.product.length != 0">
                    <div class="good-picture"  v-for="(item,index) in productdata.product" :key="index" @click="gooddetail(item.productId)">
                        <div class="data-shadow">
                            <div class="data">
                                <div class="smallclass-picture" :style="`background-image:url(${item.mstImgUrl})`"></div>
                                <div class="good-title">
                                    <div class="inner">
                                        <p>{{item.proName}}</p>
                                        <div class="model">{{item.defProModel}}</div>
                                        <p class="model-price">¥{{item.salesPrice}}</p>
                                    </div>
                                    <!-- hover底部 -->
                                    <div class="data_info">
                                        <div class="good-mask">
                                            <p>成交量：{{item.salesCount}}</p>
                                            <span>{{item.brandName}}</span>
                                        </div>
                                    </div>
                                </div>     
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 购物车没商品显示小猪 -->
                <div class="shoppingpig" v-if="productdata.product.length == 0">
                    <img src="../assets/img/pig.png">
                    <p>在您选择的条件下，没有找到相关的商品哦~</p> 
                </div>
            </div>
            <!-- 分页 -->
            <div class="page">
                <Page :total="productdata.totalCount" :page-size="60" show-total class="page-fy" on-change="change"></Page>
            </div>
        </div>        
    </div>
</template>
<script>
import Search from "../components/search.vue";
import {Icon,Page,Input,Breadcrumb,Iinput} from "iview"
import { initConditionList,productList } from "../http/api"
export default {
    components: {
        Search,
        Icon,
        Page,
        Iinput,
    },
    data() {
        return {
            one_down:true,
            one_up:false,
            two_down:true,
            two_up:false,
            three_down:true,
            three_up:false,
            four_down:true,
            four_up:false,

            conditionsResult:null, //类目筛选数据
            productdata:null,      //类目商品数据
            page:1,         //默认第一页
            pinpaione:[],   //品牌展示的小于11的数组
            pinpaitwo:[],   //品牌展示的大于11的数组
            fenlei_one:[],  //分类展示的小于11的数据
            fenlei_two:[],  //分类展示的大于11的数据
            fgyiline_one:[],//风格等筛选条件第一列的小于11个数组
            fgyiline_two:[],//风格等筛选条件第一列的大于11个数组
            fgerline_one:[],//风格等筛选条件第二列的小于11个数组
            fgerline_two:[],//风格等筛选条件第二列的大于11个数组
            fgsanline_one:[],//风格等筛选条件第三列的小于11个数组
            fgsanline_two:[],//风格等筛选条件第三列的大于11个数组
            brandId:null,    //品牌的Id
            brandname:"",    //路径上面展示的品牌名字
            intarr:[],  //风格等id存放数组
            intnamearr:[],  //风格等名字存放数组
            styleid:null,   //风格第一列id
            stylename:"",   //风格第一列name
            designid:null,  //风格第二列Id
            designidname:"",//风格第二列name
            constructionid:null,   //风格第三列Id
            constructionidname :"",//风格第三列name
            sortTime:0,      //时间排序
            sortcolor:0,     //时间排序颜色
            moneystutas:0,   //价格排序
            moneycolor:0,    //价格排序颜色改变
            moneybefore:"",   //输入最小价格
            moneyafter:"",     //输入最高价格
            minPrice:"",     //传递最小价格
            maxPrice:"",     //传递最高价格
        };
    },
    methods: {
        api_classify () {
            initConditionList({productTypeId:this.productTypeId,type:this.type}).then(res =>{
                this.conditionsResult = res.data.conditionsResult
                // 品牌第一行显示11个数据，如果品牌超出了11个，把剩余放到隐藏盒子里
                this.pinpaione = res.data.conditionsResult.brands.slice(0,11)
                this.pinpaitwo = res.data.conditionsResult.brands.slice(11)
                //如果有分类的情况下，显示分类
                if(res.data.conditionsResult.proTypes.length != 0 ){
                    this.fenlei_one = res.data.conditionsResult.proTypes.slice(0,11)
                    this.fenlei_two = res.data.conditionsResult.proTypes.slice(11)
                }
                // 风格等筛选条件集的第一列 如果只根据后面length判断会报错，因为他给的数据类型是null
                if(res.data.conditionsResult.proConditions && res.data.conditionsResult.proConditions.length != 0){
                    this.fgyiline_one = res.data.conditionsResult.proConditions[0].conditions.slice(0,11)
                    this.fgyiline_two = res.data.conditionsResult.proConditions[0].conditions.slice(11)
                }
                // 风格等筛选条件集的第二列
                if(res.data.conditionsResult.proConditions && res.data.conditionsResult.proConditions.length > 1){
                    this.fgerline_one = res.data.conditionsResult.proConditions[1].conditions.slice(0,11)
                    this.fgerline_two = res.data.conditionsResult.proConditions[1].conditions.slice(11)
                }
                // 风格等筛选条件集的第三列
                if(res.data.conditionsResult.proConditions && res.data.conditionsResult.proConditions.length > 2){
                    this.fgsanline_one = res.data.conditionsResult.proConditions[2].conditions.slice(0,11)
                    this.fgsanline_two = res.data.conditionsResult.proConditions[2].conditions.slice(11)
                }
                
            })
        },
        api_polist(){
            productList({
                proType:this.type,
                productTypeId:this.productTypeId,
                brandId:this.brandId,
                page:this.page,
                proConditions:this.intarr,
                minPrice:this.minPrice,
                maxPrice:this.maxPrice
            }).then(response =>{
                this.productdata = response.data
                // console.log(this.productdata)
            })
        },
        updown (index) {
            this.i = index
            if(this.one_down && index == 1){
                this.one_down = false
                this.one_up = true
            }else{
                this.one_down = true
                this.one_up = false
            }
            if(this.two_down & index == 2){
                this.two_down = false
                this.two_up = true
            }else{
                this.two_down = true
                this.two_up = false
            }
            if(this.three_down & index == 3){
                this.three_down = false
                this.three_up = true
            }else{
                this.three_down = true
                this.three_up = false
            }
            if(this.four_down & index == 4){
                this.four_down = false
                this.four_up = true
            }else{
                this.four_down = true
                this.four_up = false
            }
        },
        //path路径上点击
        productpath (productTypeId,type) {
            // 点击后这两个要this出来给品牌用
            this.productTypeId = productTypeId
            this.type = type
            //因为村数组的方式有错误，所以点完之后把path上面的绿色方块删除 让全部变绿色
            this.brandId = null
            this.styleid = null
            this.designid = null
            this.constructionid = null
            this.api_classify()
            this.api_polist()
        },
        //品牌
        brand (brandId,brandname) {
            this.brandId = brandId
            this.brandname = brandname
            this.api_polist()
        },
        //品牌全部   关闭
        brandqb () {
            this.brandId = null
            this.api_polist()
        },
        //分类
        fenlei (productTypeId,type) {
            this.productTypeId = productTypeId
            this.type = type
            this.api_classify()
            this.api_polist()
        },
        //风格等筛选集第一列
        style (styleid,name) {
            // 把风格集合放到数据的时候报错，之前不报错，所以分开写了
            this.styleid = styleid
            this.stylename = name
            this.intarr[0] = styleid
            this.api_polist()
            // console.log(this.styleid)           
        },
        //风格一全部
        styleqb () {
            this.styleid = null
            this.stylename = ""
            this.intarr[0] = undefined
            this.api_polist()
                // console.log(this.styleid)
        },
        //风格等筛选集第二列
        design (designid,name) {
            this.designid = designid
            this.designidname = name
            this.intarr[1] = designid
            this.api_polist()
            // console.log(this.intarr)
        },
        //风格二列全部
        designqb () {
            this.designid = null
            this.designidname = ""
            this.intarr[1] = undefined
            this.api_polist()
            // console.log(this.intarr)
        },
        //风格三列
        construction (constructionid,name) {
            this.constructionid = constructionid
            this.constructionidname = name
            this.intarr[2] = constructionid
            this.api_polist()
            // console.log(this.intarr)
            // this.constindex = index
        },
        //风格三列全部 
        constrqb () {
            this.constructionid = null
            this.constructionidname = ""
            this.intarr[2] = undefined
            this.api_polist()
            // console.log(this.intarr)
        },
        //价格确定
        sure () {
            this.sortcolor = 0
            this.moneycolor = 0
            // 不管价钱如何写，都是minprice都指向最小的
            if(Number(this.moneybefore) <= Number(this.moneyafter)){
                this.minPrice = Number(this.moneybefore)
                this.maxPrice = Number(this.moneyafter)
            }else{
                this.minPrice = Number(this.moneyafter)
                this.maxPrice = Number(this.moneybefore)
            }
            this.api_polist()
            // 防止用户输入顺序错误
        },
        // 时间排序
        tiemsort () {  
            //清除价格排序样式
            this.moneycolor = 0
            // 不管价钱如何写，都是minprice都指向最小的
            if(Number(this.moneybefore) <= Number(this.moneyafter)){
                this.minPrice = Number(this.moneybefore)
                this.maxPrice = Number(this.moneyafter)
            }else{
                this.minPrice = Number(this.moneyafter)
                this.maxPrice = Number(this.moneybefore)
            } 
            //判断价格是正序还是倒叙 
            //如果是正序，并且判断是否点击了价格排序
            if(this.sortTime == 0){
                productList({
                    proType:this.type,
                    productTypeId:this.productTypeId,
                    brandId:this.brandId,
                    proConditions:this.intarr,
                    page:this.page,
                    minPrice:this.minPrice,
                    maxPrice:this.maxPrice,
                    orderBy:"minAddTime"    //如果价格是写反的，传入的价格换一下，然后用倒叙方法
                }).then(response =>{
                    this.productdata = response.data
                    this.sortTime = 1
                    this.sortcolor = 2
                })
            }
            if(this.sortTime == 1){
                productList({
                    proType:this.type,
                    productTypeId:this.productTypeId,
                    brandId:this.brandId,
                    proConditions:this.intarr,
                    page:this.page,
                    minPrice:this.minPrice,
                    maxPrice:this.maxPrice,
                    orderBy:"maxAddTime"    //如果价格是写反的，传入的价格换一下，然后用倒叙方法
                }).then(response =>{
                    this.productdata = response.data
                    this.sortTime = 0
                    this.sortcolor = 1
                })
            }

        },
        //价格排序
        liuxing () {
            //清除时间排序样式
            this.sortcolor = 0
            // 不管价钱如何写，都是minprice都指向最小的
            if(Number(this.moneybefore) <= Number(this.moneyafter)){
                this.minPrice = Number(this.moneybefore)
                this.maxPrice = Number(this.moneyafter)
            }else{
                this.minPrice = Number(this.moneyafter)
                this.maxPrice = Number(this.moneybefore)
            } 
            //判断这步说明点击过
            if(this.moneystutas == 0){
                productList({
                    proType:this.type,
                    productTypeId:this.productTypeId,
                    brandId:this.brandId,
                    proConditions:this.intarr,
                    page:this.page,
                    minPrice:this.minPrice,
                    maxPrice:this.maxPrice,
                    orderBy:"minPrice"    //如果价格是写反的，传入的价格换一下，然后用倒叙方法
                }).then(response =>{
                    this.productdata = response.data
                    this.moneystutas = 1
                    this.moneycolor = 2
                })
            }
            if(this.moneystutas == 1){
                productList({
                    proType:this.type,
                    productTypeId:this.productTypeId,
                    brandId:this.brandId,
                    proConditions:this.intarr,
                    page:this.page,
                    minPrice:this.minPrice,
                    maxPrice:this.maxPrice,
                    orderBy:"maxPrice"    //如果价格是写反的，传入的价格换一下，然后用倒叙方法
                }).then(response =>{
                    this.productdata = response.data
                    this.moneystutas = 0
                    this.moneycolor = 1
                })
            }
        },
        //跳转商品详情
        gooddetail (id) {
            this.$router.push({path:"/gooddetail",query:{productId:id}})
        },
        //分页
        change :function (page) {
            this.page = page
            this.api_polist()
        }  
    },
    created () {
        this.type = this.$route.query.type
        this.brandId = this.$route.query.brandId
        this.brandname = this.$route.query.brandname
        this.productTypeId = this.$route.query.productTypeId
        this.api_classify()
        this.api_polist()
    }
};
</script>
<style lang="less">
@import "../assets/styles/classificationList.less";
</style>

